
// 我的
<template>
    <div class="bgColor">
        <img src="../assets/编辑资料.png" class="edit">
    </div>
    <div class="card">
        <div class="photo-wrapper">
            <img src="../assets/head3.jpg" class="photo-head">
        </div>

        <div class="info">
            <div class="info-username">
                <span class="username">热心市民陈先生</span>
                <div class="leval">
                    <img src="../assets/星星.png" class="leval-img">
                    <span class="leval-number">16</span>
                </div>
            </div>
            <span class="id">ID：19970805</span>
        </div>
        <div class="hr"></div>

        <div class="item-wrapper">
            <div class="item">
                <span class="text">红包</span>
                <span class="number">218</span>
            </div>
            <div class="item">
                <span class="text">优惠券</span>
                <span class="number">12</span>
            </div>
            <div class="item">
                <span class="text">鲜豆</span>
                <span class="number">88</span>
            </div>
            <div class="item">
                <span class="text">白条</span>
                <span class="number">1000</span>
            </div>
        </div>
    </div>

    <div class="card2">
        <div class="item2-wrapper">
            <div class="item2">
                <img src="../assets/我的钱包.png" class="item2-img">
                <span class="item2-title">我的钱包</span>
                <img src="../assets/大于.png" class="item2-logo">
            </div>
            <div class="item2" @click='address'>
                <img src="../assets/我的地址.png" class="item2-img">
                <span class="item2-title">我的地址</span>
                <img src="../assets/大于.png" class="item2-logo">
            </div>
            <div class="item2">
                <img src="../assets/我的店铺客服.png" class="item2-img">
                <span class="item2-title">客服与帮助</span>
                <img src="../assets/大于.png" class="item2-logo">
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .bgColor{
        height:50vw;
        background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
        border-radius:0 0 18vw 18vw;
       
    } 
    .edit{
        width: 6vw;
        height: 6vw;
        margin-left: 85vw;
        margin-top: 8vw;
    }
   .card{
        width:92vw;
        margin:0 auto;
        margin-top:-28vw;  
        border-radius:2vw;
        background-color:white;
        box-shadow:0 8px 16px 0 rgb(0,0,0,8%);

        .photo-wrapper{
            position:relative;
            display:flex;
            justify-content:center;
            height:30vw;

             .photo-head{
                width:30vw;
                height:30vw;
                border-radius:50%;
                position:absolute;
                top:-12vw;
            }
           
        }
        .info{
            margin-top:-10vw;
            display:flex;
            flex-direction:column;
            align-items:center;
            .info-username{
                position:relative;
                .leval{
                    display:flex;
                    width:9vw;
                    border-radius:5vw;
                    height:4vw;
                    background-image: linear-gradient(239deg, #aad08f 0%, #7cba59 100%);
                    margin-left:50vw;
                    margin-top: -6vw;
                    position:absolute;
                    opacity:0.8;
                    .leval-img{
                        width:2.5vw;
                        height:2.5vw;
                        background-color:gray;
                        border-radius:1.2vw;
                        padding:0.2vw;
                        margin: 0.5vw;
                    }
                    .leval-number{
                        color: white;
                        font-size: 0.5vw;
                        line-height: 4vw;
                    }
                }
                 .username{
                    font-size:6.5vw;
                    font-weight:400;
                }
            } 
            .id{
                color:#ccc;
                font-weight:200;
            }
        }
        .hr{
            background-color:#ccc;
            height:0.1vw;
            margin-top:3vw;
        }
       .item-wrapper{
           display:flex;
           justify-content:space-around;
           padding:5vw 0;
           .item{
               display:flex;
               flex-direction:column;
               align-items:center;
               .text{
                   color:#ccc;
                   font-weight:300;
                   font-size:3.5vw
               }
               .number{
                   color:#333;
                   font-size:5vw;
                   margin-top:1vw;
               }
           }
       }
    }
    .card2{
        width:92vw;
        margin:0 auto;
        margin-top:5vw;
        border-radius:2vw;
        background-color:white;
        box-shadow:0 8px 16px 0 rgb(0,0,0,8%);
        
        .item2-wrapper{
            display:flex;
            flex-direction:column;
            align-items:center;
            .item2{
                width:92vw;
                padding:3vw 0;
                display:flex;
                .item2-img{
                    width:8vw;
                    height:8vw;
                    margin-left:4vw;
                    margin-right:3vw;
                }
                .item2-title{
                    margin-top:1.5vw;
                    font-weight:500;
                    width:70vw;
                    font-size:4vw;
                    color:#333
                }
                .item2-logo{
                    margin-top:0.8vw;
                    width:6vw;
                    height:6vw;
                    margin-right:3vw;
                }
            }
        }
    }
</style>

<script>
import {mapState} from 'vuex'
    export default{
        data(){
            return{
                id:'',
                id2:''
            }        
        },
        created(){
            this.id=this.$route.params.id
            this.id2=this.$route.params.id2
        },
        computed:{
            ...mapState(['dizhi'])
        },
        methods:{
            goHome(){
                this.$router.push('/first'+'/1'+'/2')
            },
            address(){
                this.$store.state.dizhi='查看地址',
                // console.log(this.$store.state.dizhi),
                this.$router.push({ path:'/address'  })
            }
        }
    }
</script>